<template>
  <div>
    <van-popup :show="popshow" round get-container="body" close-on-click-overlay="false" custom-style="width:85%;border-radius:4px;" :overlay="true" @close="onClose">
      <div class="familyForm">
        <van-form>
          <van-cell-group>
            <div class="title">
              请填写您的家庭成员
            </div>
            <van-field v-model="form.name" class="familyClass" label="姓名" placeholder-style="color:#999;" required placeholder="请输入姓名" type="input" @change="form.name = $event.detail" />
            <drop-Down ref="inputForm1" :columns="genderList" :value="form.gender" :required="true" :label-name="'性别'" @changeValue="changeValue" />
            <van-field v-model="form.age" class="familyClass" label="年龄" placeholder-style="color:#999;" required placeholder="请输入年龄" type="input" @change="form.age = Number($event.detail)" />
            <drop-Down ref="inputForm2" :columns="relationList" :value="form.correlations" :required="true" :label-name="'相互关系'" @changeValue="changeValue" />
            <van-field v-model="form.workUnit" class="familyClass" label="工作单位" placeholder-style="color:#999;" autosize required placeholder="请输入工作单位" type="textarea" @change="form.workUnit = $event.detail" />
            <van-field v-model="form.mobile" class="familyClass" label="住宅电话" placeholder-style="color:#999;" required placeholder="请输入住宅电话" type="tel" @blur="onBlur" @change="form.mobile = $event.detail" />
            <van-field v-model="form.remarks" class="familyClass" label="备注" placeholder-style="color:#999;" autosize placeholder="请输入备注" type="textarea" @change="form.remarks = $event.detail" />
          </van-cell-group>
        </van-form>
        <div class="familyBtn">
          <div class="cancel" @click="onClose">
            取消
          </div>
          <div class="submit" @click="getform">
            确定
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import dropDown from '../drop-down.vue'
import { checkMobile } from '../../../../utils/rule'
import Toast from '@/wxcomponents/vant/toast/toast'
export default {
  components: { dropDown },
  props: {},
  data() {
    return {
      popshow: false,
      form: {
        name: '',
        gender: '',
        age: '',
        correlations: '',
        workUnit: '',
        mobile: '',
        remarks: '',
      },
      age: 0,
      genderList: ['男', '女'],
      relationList: ['母子', '父子', '姐弟'],
    }
  },
  methods: {
    // 电话号码失去焦点
    onBlur(val) {
      const number = checkMobile(val.detail.value)
      if (!number) {
        this.form.mobile = ''
      }
    },
    open() {
      this.popshow = true
      this.$refs.inputForm1.cleanInput()
      this.$refs.inputForm2.cleanInput()
      this.form = {
        name: '',
        gender: '',
        age: '',
        correlations: '',
        workUnit: '',
        mobile: '',
        remarks: '',
      }
    },
    edit(item) {
      item.isEdit = true
      this.form = item
      this.popshow = true
    },
    // 关闭弹窗
    onClose() {
      this.popshow = false
    },
    // 提交
    getform() {
      if (this.form.name.trim().length === 0) {
        Toast('请填写姓名')
        return
      }
      if (this.form.gender.trim().length === 0) {
        Toast('请选择性别')
        return
      }
      if (String(this.form.age).trim().length === 0) {
        Toast('请填写年龄')
        return
      }
      if (this.form.correlations.trim().length === 0) {
        Toast('请填写关系')
        return
      }
      if (this.form.mobile.trim().length === 0) {
        Toast('请填写联系电话')
        return
      }
      this.onClose()
      this.$emit('personValue', this.form)
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '性别':
          this.form.gender = val.value
          break
        case '相互关系':
          this.form.correlations = val.value
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.familyForm{
    color:#333;
    font-size: 18px;
    font-weight: 600;
    padding-top:20px;
    text-align: center;
    .title{
        padding-bottom: 20px;
    }
    .familyBtn{
        display: flex;
        color:#739ECA;
        height:64px;
        .cancel{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #F2F2F2;
        }
        .submit{
            width: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
<style lang="scss">
.familyClass{
  view {
    label{
      width:100%;
      display: flex;
      white-space: nowrap;
    }
    input{
      padding-right: 16px;
      text-align: right;
      color:#999;
    }
    textarea{
      padding-right: 16px;
      text-align: right;
      color:#999;
    }
  }
}
</style>
